<template>
  <div class="daraBoardMainItem_content page_content">
    <div class="header_box p-10 bold flex flex-ac flex-jsb">
      <div class="title">签约收集点数量</div>
      <div class="dots flex flex-c flex-jc flex-ac">
        <span>.</span>
        <span>.</span>
        <span>.</span>
      </div>
    </div>
    <div class="main_box m-10">
      <div class="main_boxView grid">
        <div v-for="(item, inx) in collectionPointList" :key="inx" class="main_box_item mb-15 flex flex-jsb">
          <div class="title mr-15">{{ item.name }}</div>
          <div class="value" :class="item.value == 0 ? 'ling' : ''">
            {{ item.value }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
} from "vue";
import { useStore } from "vuex";
const store = useStore();

const props = defineProps({
  assetStatisticsObj: {
    type: Object,
    required: false,
    default: {}
  }
});
const collectionPointList = ref([
  {
    name: "环保垃圾屋",
    value: 0,
  },
  {
    name: "垃圾分类亭",
    value: 0,
  },
  {
    name: "垃圾暂存点",
    value: 0,
  },
  {
    name: "果皮箱",
    value: 0,
  },
  {
    name: "地下室收集点",
    value: 0,
  },
]);
onMounted(() => { });

onBeforeUnmount(() => { });
</script>
<style lang="scss" scoped>
.daraBoardMainItem_content {
  .header_box {}

  .main_box {

    // height: calc(400px - 35px - 20px);
    // overflow-y: auto;
    .main_boxView {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-row-gap: 16px;
      grid-column-gap: 20px;
    }

    .main_box_item {
      font-weight: 550;
      font-size: 15px;

      .title {
        color: #666666;
      }

      .value {
        color: #1890ff;
      }

      .ling {
        color: #999999;
      }
    }

    .main_box_item:last-child {
      margin-bottom: 0;
    }
  }
}
</style>